/* =================================== */
/*  Homepage Styles
/* =================================== */

.section-gap {
    padding: 120px 0;
}


.alert-msg {
    color: #008000;
}

.primary-btn {
    background: $primary-color;
    line-height: 42px;
    padding-left: 30px;
    padding-right: 30px;
    border: none;
    color: $white;
    display: inline-block;
    font-weight: 500;
    position: relative;
    @include transition();
    cursor: pointer;
    position: relative;
    &:focus {
        outline: none;
    }
    span {
        color: $white;
        position: absolute;
        top: 50%;
        transform: translateY(-60%);
        right: 30px;
        @include transition();
    }
    &:hover {
        color: $white;
        span {
            color: $white;
            right: 20px;
        }
    }
    &.white {
        border: 1px solid $white;
        color: $white;
        span {
            color: $white;
        }
        &:hover {
            background: $white;
            color: $primary-color;
            span {
                color: $primary-color;
            }
        }
    }
}

.primary-btn.squire {
    border-radius: 0px!important;
    border: 1px solid transparent;
    &:hover {
        border: 1px solid $white;
        background: transparent;
        color: $white;
    }
}

.overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.section-title {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
    h1 {
        margin-bottom: 10px;
    }
}

/*-------- Start Banner Area ------------*/
.banner-area {
    background: url(../img/banner-bg.jpg) right;
    background-size: cover;
    .overlay-bg {
        background-color: rgba(#000, .2);
    }
}

@media(max-width:767px) {
    .fullscreen {
        height: 700px !important;
    }
}

.banner-content {
    text-align: left;
    h1 {
        font-size: 60px;
        font-weight: 700;
        line-height: 1em;
        margin-top: 10px;
        color: $white;
        @include media-breakpoint-down(md) {
            font-size: 36px;
        }
        br {
            @include media-breakpoint-down (md) {
                display: none;
            }
        }
        @include media-breakpoint-down (lg) {
            font-size: 45px;
        }
        @media ( max-width:480px) {
            font-size: 32px;
        }
    }

    .primary-btn {
        background-color: $primary-color;
        color: $white;
        font-weight: 600;
        font-size: 14px;
        &:hover {
            background-color: $white;
            color:$primary-color;
        }
    }
}

/*-------- End Banner Area ------------*/


/*-------- Start top-course Area ------------*/

.top-course-area{

    .owl-dots {
        text-align: center;
        bottom: 5px;
        margin-top:40px;
        width: 100%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .owl-dot {
        height: 10px;
        width: 10px;
        display: inline-block;
        background: rgba(127,127,127, 0.5);
        margin-left: 5px;
        margin-right: 5px;
        @include transition();
    }

    .owl-dot.active {
        @include transition;
        background:$primary-color;
    }
}

.single-carusel{
    .thumb{
        position: relative;
        img{
            width:100%!important;
        }
    }
    .join-btn{
        font-size:13px;
        font-weight:300;
        padding:5px 40px;        
        background-color:$primary-color;
        a{
            color:$white;
        }
        position:absolute;
        bottom:20px;
        left:20px;
    }
    .title-price{
        margin-top:20px;
        h4{
            @include transition();
            &:hover{
                color:$primary-color;
            }
        }
        .price{
            color:$primary-color;
        }
    }
    @media(max-width:575px){
        margin:15px;
    }    
}

/*-------- End top-course Area ------------*/



/*-------- Start cat-area Area ------------*/

.single-cta{
    text-align:center;
    padding:225px 0px;
    color:$white;
    h1{
        padding:20px 0px;
    }    
    h6{
        font-size: 12px;
        font-weight:300;
        letter-spacing:2px;
    }
    h6,h1{
        color:$white;
        position:relative;
    }
    .overlay-bg{
        background-color:rgba(#000, .5);
       
    }
    .primary-btn{
        &:hover{
            background-color:$white;
            color:$primary-color;
        }
    }
}
.cta1{
    background:url(../img/cta1.jpg) center;
    background-size:cover;   
}

.cta2{
    background:url(../img/cta2.jpg) center;
    background-size:cover;
}

/*-------- End cat-area Area ------------*/


/*-------- Start feature Area ------------*/

.feature-area{
    
    .feature-left{
        @media(max-width:991px){
            text-align:center;
            margin-bottom:50px;
        }
    }

    .feature-right{
      padding-left:90px;
      @media(max-width:520px){
        padding:15px;
      }   
      .single-feature{
            max-width: 360px;
            margin-bottom:30px;
            &:last-child{
                margin-bottom:0px;
            }
            h4{
                font-weight:500;
                font-size:20px;
                margin-bottom:20px;
            }
            p{
                margin-bottom:0px;
            }
        }
    }


}

/*-------- End feature Area ------------*/


/*-------- Start calculation Area -------------*/

.aclculation-area{
    background: url(../img/calc-bg.jpg) center;
    background-size:cover;
    .overlay-bg{
        background-color:rgba($primary-color, .75)
    }
    
    .title-row{
        p{
            margin-bottom:0px;
            text-align:right;
            @media(max-width:991px){
                padding-bottom:15px;
            }
        }
    }

    .form-control{
        background:transparent;
        border:1px solid rgba(#fff, .30);
        width:100%;
        border-radius:0;
        color:$white;
        padding:10px 20px;
        font-size:13px;
        font-weight: 300;        
        &:focus{
            color:$white;
            box-shadow: none;
            font-size:13px;
            font-weight: 300;            
        }
        @media(max-width:991px){
            margin-bottom:15px;
        }

        &::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */
            color: $white;
            font-size:13px;
            font-weight: 300;
        }
        &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: $white;
            font-size:13px;
            opacity: 1;
            font-weight: 300;
        }
        &::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: $white;
            font-size:13px;
            opacity: 1;
            font-weight: 300;
        }
        &:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: $white;
            font-size:13px;
            font-weight: 300;
        }
        &::-ms-input-placeholder {
            /* Microsoft Edge */
            color: $white;
            font-size:13px;
            font-weight: 300;
        } 

    }

    .primary-btn{
        width:100%;
        text-align:center;
        background:$white;
        color:$black;
        font-weight:600;
        &:hover{
            background:$black;
            color:$white;
        }
    }   
}

/*-------- End calculation Area -------------*/


/*-------- Start image-gallery Area -------------*/

.image-gallery-area {
    .single-gallery {
        img {
            width: 100%;
            margin-bottom: 30px;
            @include transition();
        }
        a:hover {
            img {
                -webkit-filter:brightness(30%);
                filter:brightness(30%);
            }
        }
    }
}


/*-------- End image-gallery Area -------------*/


/*--------- Start testimonial Area -------------*/

.testomial-area{
    background-color: $offwhite;    
    .owl-carousel .owl-item img{
        width:auto!important;
    }

    .owl-dots {
        text-align: center;
        bottom: 5px;
        margin-top:80px;
        width: 100%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .owl-dot {
        height: 10px;
        width: 10px;
        display: inline-block;
        background: rgba(127,127,127, 0.5);
        margin-left: 5px;
        margin-right: 5px;
        @include transition();
    }

    .owl-dot.active {
        @include transition;
        background:$primary-color;
    }
        
    @media(max-width:414px){
        .active-tstimonial-carusel{
            padding:30px;
        }
    }   
}

.single-testimonial{
    text-align:center;
    padding:30px;
    text-align:center;
    background:$white;
    @include transition();
    h4{
        @include transition();
    }
    .desc{
        padding:30px 0px; 
    }
    &:hover{
        cursor:pointer;
        h4{
            color:$primary-color;
        }
    }
    @media(max-width:575px){
        margin:15px;
    }
}


/*--------- End testimonial Area -------------*/

/*--------- start brand Area -------------*/

.brands-area{
    padding:60px 0px;
    .brand-wrap{
        padding:40px 0;
        .owl-carousel .owl-item img{
            width:auto!important;
        }   
        .single-brand{
            text-align:center;
            @include filter(grayscale, 100%);
            opacity:.3;
            @include transition();
            &:hover{
                @include filter(grayscale, 0%);
                opacity:1;
            }
        }
    }

}

/*--------- end brand Area -------------*/

/*--------- Start callto Area -------------*/

.callto-area{
    background:url(../img/ct1.jpg) center;
    background-size:cover;
    text-align:center;    
    .call-wrap{
        position: relative;
    }
    h1{
        color:$white;
        text-align:center;
    }
    p{
        max-width:850px;
        color:$white;
        margin:30px;
    }
    .overlay-bg{
        background:rgba(#000, .5)
    }
    .primary-btn{
        &:hover{
            background:$white;
            color:$primary-color;
        }
    }
}

/*--------- end callto Area -------------*/

/*-------- Start Common Page Style   -------------*/

.link-nav {
    margin-top: 10px;
    margin-bottom: 0px;
}

.about-banner {
    background: url(../img/top-banner.jpg) right no-repeat;
    background-size:cover;
}

.about-content {
    margin-top: 98px;
    padding: 90px 0px;
    text-align: center;
    @media(max-width: 767px) {
        margin-top: 70px;
    }
    h1 {
        font-size: 48px;
        font-weight: 600;
    }
    a {
        color: $white;
        font-weight: 300;
        font-size: 14px;
    }
    .lnr {
        margin: 0px 10px;
        font-weight: 600;
    }
}


/*-------- End Common Page Style   -------------*/


